home *** CD-ROM | disk | FTP | other *** search
/ The Word 17 / The Word 17 (Disk 2 of 2).adf / Files / 02-HTML02.txt / 02-HTML02.txt
Text File  |  1998-01-06  |  8KB  |  216 lines
  1.  
  2. $9ff|1-D!ck's Guide to
  3.  
  4.  
  5. |1-Basic HTML
  6.  
  7.  
  8.  
  9. $ff8                     Lesson 2 - by D!ck, of course!
  10.  
  11. Lesson 01:  Inserting Images
  12.             Using Tables
  13.             Creating Links
  14.  
  15. $ffaOK,  last  time I described how to set up a simple HTML file and control
  16. the  flow  of  text within it, in this lesson we're going to learn about
  17. images  and tables, arguably two of the most important areas of web page
  18. design  these days, because they enhance the presentation no end.  We'll
  19. also look at ways to link to other files and sites.
  20.  
  21. $9ff|1-Graphics
  22.  
  23.  
  24.  
  25. $fbfImage  files are inserted using the IMG tag, it's a one-part tag and the
  26. format goes:
  27.  
  28.     <IMG SRC="blahblah.jpg">
  29.  
  30. which  will  insert  the  image "blahblah.jpg" into your document at the
  31. current  text  position.   There are several parameters to be taken into
  32. account though:
  33.  
  34.     WIDTH=xx  - WIDTH of image in Pixels
  35.     HEIGHT=yy - HEIGHT of image in Pixels
  36.     BORDER=nn - BORDER width around image
  37.     ALT=""    - Description string
  38.  
  39. If your browser is intelligent enough to handle it then there is no need
  40. to  include the WIDTH and HEIGHT params because your image will be sized
  41. properly  once  it is loaded, however, because the HTML is loaded first,
  42. there  is no way for it to know in advance how big the image will be and
  43. so  the  entire  document  will  have to be re-displayed once the pic is
  44. loaded.   This  can be very annoying, and so it is wise to put the WIDTH
  45. and HEIGHT of the image into the tag.
  46.  
  47. An  added  bonus  is  that  an image can be scaled to any size simply by
  48. substituting  preferred  dimensions for the actual size of the file.  If
  49. you creade a small bar, say 3x3 pixels, and use the tag:
  50.  
  51.     <IMG SRC="bar.jpg" WIDTH=600 HEIGHT=3>
  52.  
  53. then the bar is stretched across the screen, an effective way of filling
  54. a large area with a small graphic image.
  55.  
  56. The  BORDER=  param is mainly used to prohibit the rendering of a border
  57. around  the  image  when it is used as a link.  Setting it to 0 means no
  58. border is displayed.
  59.  
  60. Finally, the ALT= part will display a line of text in place of the image
  61. if  graphics  are switched off, or if the mouse pointer is held over the
  62. image for a few seconds.
  63.  
  64. Because the net can get clogged quite easily, it is recommended that you
  65. save  any images in both JPEG and GIF format and use the smallest of the
  66. two,  especially  where  thumbnails  are concerned.  Keep your images as
  67. small as possible to save download time and bandwidth congestion.
  68.  
  69. $fbe|1-Tables
  70.  
  71.  
  72.  
  73. $ffdTables  are  -  as  you'd guess - a way of presenting data.  They can be
  74. used  to  great effect to aid presentation and formatting of a document,
  75. this  article  itself  is in a 600-pixel wide table (on the HTML version
  76. anyway!)  which  is centred in the screen.  That way, the file looks the
  77. same in either a 640-wide or an 800-wide display.
  78.  
  79. Tables  consist  of  rows and columns, and all tags are enclosures, with
  80. rows coming before columns and the whole lot inside the table.  To start
  81. off, we use:
  82.  
  83.     <TABLE>
  84.     </TABLE>
  85.  
  86. To define our section, there are the usual options to go with this, plus
  87. a couple of specifics:
  88.  
  89.     WIDTH=xx       - WIDTH of table, either pixels or percent
  90.     HEIGHT=yy      - HEIGHT of table, either pixels or percent
  91.     BORDER=nn      - Thickness of BORDER around cells, 0 = none
  92.     CELLPADDING=nn - Gap left around cell items in Pixels
  93.     CELLSPACING=nn - Gap left between cells in Pixels
  94.  
  95. Using  these  we  can set our table up accordingly, we will endeavour to
  96. use  a  600x200  pixel  table,  divided  into  two rows, each with three
  97. colums.  So to start with, out <TABLE> tag would now look like this:
  98.  
  99.   <TABLE WIDTH=600 HEIGHT=200 CELLPADDING=0 CELLSPACING=0 BORDER=0>
  100.   </TABLE>
  101.  
  102. Now  to  fill  it in.  If you are only having one row on your table then
  103. you  can  ignore  the rows tags altogether and proceed straight onto the
  104. columns, but as we want two of them, we have to define them thus:
  105.  
  106.   <TABLE WIDTH=600 HEIGHT=200 CELLPADDING=0 CELLSPACING=0 BORDER=0>
  107.     <TR>
  108.     </TR>
  109.     <TR>
  110.     </TR>
  111.   </TABLE>
  112.  
  113. This  defines  them  both, generally you don't need to insert params for
  114. the Table Rows.
  115.  
  116. The  colums  are  knows  as Table Datas, and because we have defined our
  117. table  as  being 600 pixels wide, they will pad out to the full width as
  118. default,  although  they  do  take  WIDTH  and  HEIGHT params.  For this
  119. example we'll stick them in anyway for continuity.
  120.  
  121.   <TABLE WIDTH=600 HEIGHT=200 CELLPADDING=0 CELLSPACING=0 BORDER=0>
  122.     <TR>
  123.       <TD WIDTH=200 HEIGHT=100></TD>
  124.       <TD WIDTH=200 HEIGHT=100></TD>
  125.       <TD WIDTH=200 HEIGHT=100></TD>
  126.     </TR>
  127.     <TR>
  128.       <TD WIDTH=200 HEIGHT=100></TD>
  129.       <TD WIDTH=200 HEIGHT=100></TD>
  130.       <TD WIDTH=200 HEIGHT=100></TD>
  131.     </TR>
  132.   </TABLE>
  133.  
  134. To  be  even  more  ruthlessly efficient and pedantic, we don't actually
  135. NEED  to  put the WIDTH and HEIGHT params in the second row of <TD>'s as
  136. the  WIDTH  is  defined in the first row, and the HEIGHT will default to
  137. take up all remaining space anyway, but it's neater to do so.
  138.  
  139. Notice that the <TD> and </TD> tags in the example are on the same line.
  140. This  is  because some browsers - notably Netscape Navigator - insist on
  141. this  format,  otherwise  they  will insert a gap around the cells which
  142. will  bugger up your pretty page.  The only time I have found this to be
  143. too  fiddly is when I have lots of text in a cell, in which case I'm not
  144. too bothered about the padding anyway.
  145.  
  146. Similarly,  some browsers will not display a cell if it contains nothing
  147. and  so  it is wise to test your document on as many browsers as you can
  148. before releasing it on an unsuspecting site.
  149.  
  150. There  is  quite  a  bit more that you can do with Tables, but this is a
  151. guide  to  the  BASIC  stuff, for an in-depth tutorial I suggest you get
  152. yourselves a book on the subject.
  153.  
  154. $df0|1-Links
  155.  
  156.  
  157.  
  158. You  will be familiar with links if you havwe ever written an AmigaGuide
  159. document.   The main difference is that HTML does not support "pages" of
  160. information as such, all pages are seperate files, although you CAN jump
  161. to  a  different  position  within a file, or even in another file, much
  162. like Amigaguide.
  163.  
  164. Links  are  also  enclosed  tags.   This  enables you to make just about
  165. anything on a page into a link, be it a piece of text or an image, and a
  166. simple  mouse  click  will send the user on their way somewhere else, or
  167. start a file downloading, or play a sample, almost anything.
  168.  
  169. The basic format is:
  170.  
  171.     <A HREF="{file or location}"> ... </A>
  172.  
  173. You  can  replace  the  "...",  above,  with anything you like, and line
  174. breaks  ,  paragraphs,  and  seperate lines are all okay, so both of the
  175. following are perfectly valid:
  176.  
  177.   <A HREF="http://freespace.virgin.net/dr.dick/">Dr Dick</A>
  178.  
  179. or
  180.  
  181.   <A HREF="http://freespace.virgin.net/dr.dick/">
  182.     <IMG SRC="dick.jpg" WIDTH=80 HEIGHT=60 BORDER=0 ALT="Dick's Page">
  183.   </A>
  184.  
  185. In  the  first  example,  the  text  will  be  underlined and probably a
  186. different  colour, which can be changed by inserting LINK="#rrggbb" into
  187. the BODY tag of the document.
  188.  
  189. In  the  second example, the image "dick.jpg" becomes the link, although
  190. no  border is rendered (thanks to "BORDER=0" in the IMG tag), and moving
  191. the mouse over the image for a few seconds will produce the text "Dick's
  192. Page" in a small floating box.
  193.  
  194. Clicking on either of these will tell your browser to attempt to try and
  195. jump  to the page defined in the HREF part of the <A> tag, in this case,
  196. my  own homepage (plug!  plug!), but you can link to an archive file, in
  197. which case it will be downloaded and can be saved to disk, so:
  198.  
  199.   <A HREF="tw16html.zip">Download TW16</A>
  200.  
  201. will  start  the downloading of a ZIP file, or whatever filename you put
  202. between the quotes.
  203.  
  204. $ff9                           =================
  205.                            End of lesson 02!
  206.                            =================
  207.  
  208. If  you'd  like to influence the way this course runs you can E-Mail any
  209. questions  to me at Dr.Dick@Virgin.net and I will try to gear the course
  210. more  towards  the things that people are asking.  Failing that, you can
  211. write  to  the normal submissions address and ask for your queries to be
  212. forwarded on to me by E-Mail.
  213.  
  214. D!ck
  215.  
  216.